<%@ page import="java.util.List" %>
<%@ page import="com.zjq.pojo.Cart" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/12/27
  Time: 19:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/owl.carousel.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/slicknav.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/animate.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/price_rangs.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/magnific-popup.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/fontawesome-all.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/themify-icons.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/slick.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/nice-select.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/style.css">

    <style>
        #container{
            display: none;
        }
        .cc:hover #container{
            display: block;
        }
    </style>
</head>
<body>
<header>
    <div class="header-area">
        <div class="main-header ">
            <div class="header-top ">
                <div class="container">
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="d-flex justify-content-between align-items-center flex-sm">
                                <div class="header-info-left d-flex align-items-center">
                                    <!-- logo -->
                                    <div class="logo">
                                        <a href="${pageContext.request.contextPath}/bookStore/index"><img src="${pageContext.request.contextPath}/statics/img/logo/logo.png" alt=""></a>
                                    </div>
                                    <!-- Search Box -->
                                    <form action="${pageContext.request.contextPath}/book/queryBookByName" class="form-box" method="post">
                                        <input type="text" name="name" placeholder="搜索书名">
                                        <div class="search-icon">
                                            <i class="ti-search" id="sbb"><input type="submit" style="display: none" id="sb"></i>
                                            <script>sbb.onclick = function () {
                                                sb.click();
                                            } </script>
                                        </div>
                                    </form>
                                </div>
                                <div class="header-info-right d-flex align-items-center">
                                    <ul>
                                        <li><a href="#">FAQ</a></li>
                                        <li><a href="#">我的订单</a></li>
                                        <li class="cc">
                                            <a href="${pageContext.request.contextPath}/bookStore/queryCart?id=${sessionScope.user.id}"><img src="${pageContext.request.contextPath}/statics/img/icon/cart.svg" alt=""></a>
                                            <div id="dot" style="width: 18px;height: 18px;border-radius: 50%;background-color: red;position: absolute;margin-top: -36px;margin-left: 20px;color: white;text-align: center;line-height: 18px;display: none;"></div>
                                            <div id="container" style="width: 360px;background-color:rgba(255,255,255,0.8);position: absolute;right: -20px;z-index: 999">

                                            </div>
                                        </li>
                                        <li>
                                            <c:choose>
                                                <c:when test="${sessionScope.user !=  null}">
                                                    <a href="${pageContext.request.contextPath}/Mymessage?id=${sessionScope.user.id}">
                                                        <img src="${sessionScope.user.avatar}" style="width: 60px;border-radius: 50%">&nbsp;${sessionScope.user.nickname}
                                                    </a>
                                                    &nbsp;
                                                    <a href="${pageContext.request.contextPath}/user/removeSession">
                                                        退出
                                                    </a>
                                                </c:when>
                                                <c:otherwise>
                                                    <a href="${pageContext.request.contextPath}/user/tologin" class="btn header-btn">登录</a>
                                                </c:otherwise>
                                            </c:choose>
                                            <c:if test="${sessionScope.user.type > 0}"><a href="${pageContext.request.contextPath}/book/allBook" style="margin-left: 20px">进入后台</a></c:if>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="header-bottom  header-sticky">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-xl-12">
                            <!-- logo 2 -->
                            <div class="logo2">
                                <a href="index.html"><img src="${pageContext.request.contextPath}/statics/img/logo/logo.png" alt=""></a>
                            </div>
                            <!-- Main-menu -->
                            <div class="main-menu text-center d-none d-lg-block">
                                <nav>
                                    <ul id="navigation">
                                        <li><a href="${pageContext.request.contextPath}/bookStore/index">首页</a></li>
                                        <li><a href="categories.html">Categories</a></li>
                                        <li><a href="about.html">About</a></li>
                                        <li><a href="#">Pages</a>
                                            <ul class="submenu">
                                                <li><a href="login.html">login</a></li>
                                                <li><a href="${pageContext.request.contextPath}/bookStore/queryCart?id=${sessionScope.user.id}">购物车</a></li>
                                                <li><a href="checkout.html">Checkout</a></li>
                                                <li><a href="book-details.html">book Details</a></li>
                                                <li><a href="blog_details.html">Blog Details</a></li>
                                                <li><a href="elements.html">Element</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="blog.html">Blog</a></li>
                                        <li><a href="contact.html">Contect</a></li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                        <!-- Mobile Menu -->
                        <div class="col-xl-12">
                            <div class="mobile_menu d-block d-lg-none"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</header>

<script type="text/javascript" src="${pageContext.request.contextPath}/statics/jquery.min.js"></script>
<script>
    let con = document.getElementById("container");
    let dot = document.getElementById("dot");
    if (${sessionScope.user.id != null}){
        $.ajax({
            url: "${pageContext.request.contextPath}/bookStore/queryCartByUserId",
            type: "POST",
            dataType: "json",
            data: { id: ${sessionScope.user.id} },
            success:function (data) {
                var arr = data;
                dot.style.display = "block";
                if (arr.length > 0){
                    $('#dot').html(arr.length);
                }else {
                    $('#dot').html("0");
                }
                console.log(arr);
                var str = '';
                for(var i=0;i<arr.length;i++){
                    str += '<div class="item">'+
                        '<span><a href=""><img src=" '+ arr[i].books.bookImg +'" style="width: 80px;height: 120px;padding: 10px;"/>&nbsp;&nbsp;'+arr[i].books.bookName+'</a></span>'+
                        '<span>'+
                        '<span style="padding-left: 60px;width: 10px">x'+ arr[i].counts +'</span>'+
                        '<span style="float: right;line-height: 120px;width: 40px">'+ arr[i].counts * arr[i].books.price +'</span>'+
                        '</span>'+
                        '</div>';
                }
                //放入页面的容器显示
                $('#container').html(str);
            },
            error:function () {
                alert("sb")
            }
        })
    }
</script>

</body>
</html>
